<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap飞机跑道进度条动画特效</title>
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<style>
	.plane01{
		width: 55%; background:#005394;
	}
	.plane02{
		width: 10%; background:#d9534f;
	}
	.plane03{
		width: 40%; background:#f0ad4e;
	}
</style>
<script>
	//判断有没有getElementsByClassName
	if(!document.getElementsByClassName){
		document.getElementsByClassName = function(classname){
			var temp = [];
			var alldom = document.getElementsByTagName("*");
			for(var i=0; i<alldom.length; i++){
				if(alldom[i].className.indexOf(classname+" ") != -1){
					temp.push(alldom[i]);
				}
			}
			return temp;
		}
	}
	onload = function(){
		var list = document.getElementsByClassName("progress-bar")
		
		var totalWidth = list[0].parentNode.currentStyle.width;
		//var totalWidth = window.getComputedStyle(list[0].parentNode,null).width;
		
		
		var t01 = setInterval(function(){
			var curtWidth = list[0].currentStyle.width;
			//var curtWidth = window.getComputedStyle(list[0],null).width;
			var percent = Math.ceil( parseInt(curtWidth)/parseInt(totalWidth) * 100 );
			list[0].style.width = percent+1+"%";
			list[0].children[0].innerHTML = percent+1+"%";
			if(percent==99){
				clearInterval(t01);
			}
		},100);
		var t02 = setInterval(function(){
			//IE的写法
			var curtWidth = list[1].currentStyle.width;
			//var curtWidth = window.getComputedStyle(list[1],null).width;
			var percent = Math.ceil( parseInt(curtWidth)/parseInt(totalWidth) * 100 );
			list[1].style.width = percent+1+"%";
			list[1].children[0].innerHTML = percent+1+"%";
			if(percent==99){
				clearInterval(t02);
			}
		},20);
		var t03 = setInterval(function(){
			var curtWidth = list[2].currentStyle.width;
			//var curtWidth = window.getComputedStyle(list[2],null).width;
			var percent = Math.ceil( parseInt(curtWidth)/parseInt(totalWidth) * 100 );
			list[2].style.width = percent+1+"%";
			list[2].children[0].innerHTML = percent+1+"%";
			if(percent==99){
				clearInterval(t03);
			}
		},10);
	}
</script>
<body>
<div class="container">
	<div class="progress">
		<div class="progress-bar plane01">
			<span>55%</span>
		</div>
	</div>

	<div class="progress">
		<div class="progress-bar plane02">
			<span>10%</span>
		</div>
	</div>

	<div class="progress">
		<div class="progress-bar plane03">
			<span>40%</span>
		</div>
	</div>
</div>

</body>
</html>